<template>
  <div>
      <div>事件冒泡----{{text}}</div>
      <div class="d1" @click="fun1()">
          <div class="d2" @click.stop="fun2()"></div>
      </div>

  </div>
</template>

<script>
export default {
    data(){
        return{
            text:'颜色'
        }
    },
    methods:{
        fun1(){
            this.text="red"
        },
        fun2(){
            this.text="pink"
        },

    },

}
</script>

<style scoped>
    .d1{
        background-color: red;
        width: 1rem;
        height: 1rem;
    }
    .d2{
        background-color: pink;
        width: .5rem;
        height: .5rem;
    }
</style>